<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
body{font-family:Arial,serif;font-size:15px;line-height:180%;margin-top:0;margin-left:0;padding-bottom: 20px} /*总控制，可忽略此行*/
table tr:first-child{background:#38a4ed; color:#fff;font-weight:bold;} /*第一行标题蓝色背景*/
table{border-top:1pt solid #C1DAD7;border-left:1pt solid #C1DAD7;width: 70%;}
table td {word-wrap: break-word;max-width:500px;}
td{ padding:5px 10px; text-align:center;border-right:1pt solid #C1DAD7;border-bottom:1pt solid #C1DAD7;}
tr:nth-of-type(odd){ background:#F5FAFA;} /* odd 标识奇数行，even标识偶数行 */
tr:hover{ background:#E0F0F0;} /*鼠标悬停后表格背景颜色*/
ul{position:fixed;float:left; width: 20%; height: 100%; overflow: auto; margin-top: 0; background: rgba(255, 255, 255, 0.2); color: rgba(199, 199, 199, 0.5); box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);}
li{line-height: 30px;text-decoration:none; color: #000;padding: 8px 8px;}
li a{text-decoration:none;color: #000;font-size: 1.1rem;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
li > a:hover{color: #38a4ed;-webkit-transition: .12s;transition: .12s;}
ul > li::marker {content: url('');}
ol > li::marker {content: url('');}
ol {padding-inline-start: 30px;}
my{float: right;width:-moz-calc(80% - 60px);width:-webkit-calc(80% - 60px);width: calc(80% - 60px);padding-bottom: 20px;}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {width: 7px;height: 7px;background-color: #f5f5f5;}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #f5f5f5;}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {border-radius: 10px;box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #c8c8c8;}
</style>
</head>
<body>
<ul>
${catalogue}
</ul>
<my>
${data}
</my>
</div>
</body>
</html>